<template>
  <div class="tktk_container">
    <!--菜单表格-->
    <div class="tktk_btn"><el-button type="primary" size="mini" @click="handleAdd" icon="el-icon-plus">新增人员</el-button>
    </div>
    <el-table v-loading="loading" :data="personList" row-key="ruleId">
      <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="roleName" label="角色名称" :show-overflow-tooltip="true" align="center"></el-table-column>
      <el-table-column prop="userName" label="用户名" :show-overflow-tooltip="true" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="success">启用</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete"
            @click="handleDelete(scope.row.userId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="box-center">
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="search.pageNum"
        layout="prev, pager, next" :page-size="search.pageSize" :total="total">
      </el-pagination>
    </div>

    <!--新增编辑表格-->
    <el-drawer :title="title" :visible.sync="drawer" :direction="direction" :before-close="cancel"
      :wrapperClosable="false" size="40%">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" size="small">
        <el-form-item label="角色列表" prop="roleId">
          <el-select v-model="form.roleId" placeholder="请选择角色" class="w260">
            <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName" placeholder="请输用户名" maxlength="30" class="w260" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码" minlength="8" maxlength="30"
            class="w260" />
        </el-form-item>
        <el-form-item label="确认密码" prop="suffirmedPassword">
          <el-input type="password" v-model="form.suffirmedPassword" placeholder="请输入确认密码" minlength="8" maxlength="30"
            class="w260" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <div class="radio-group">
            <label><input value="0" v-model="form.status" type="radio" name="status" />启用</label>
            <label><input value="1" v-model="form.status" type="radio" name="status" />禁用</label>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { roleList, personList, addPerson, deletePerson } from '@/api/tktk/role'
export default {
  name: 'personList',
  data() {
    return {
      loading: false,
      drawer: false,
      dialogVisible: false,
      title: '新增人员',
      dialogImageUrl: '',
      direction: 'rtl',
      roleList: [],
      personList: [],
      total: 0,
      search: {
        pageNum: 1,
        pageSize: 10,
      },
      form: {
        roleId: '',
        userName: '',
        password: '',
        suffirmedPassword: '',
        status: '0'
      },
      rules: {
        roleId: [
          { required: true, message: '角色不能为空', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        suffirmedPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '状态不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleUpdate(row) {
      this.title = '编辑人员'
      this.drawer = true
      const { id, userName, password, status, roleIds } = row
      this.form = { id, userName, password, suffirmedPassword: password, status, roleId: roleIds[0] }
      console.log(row)
    },
    handleAdd() {
      this.drawer = true
    },
    handleDelete(id) {
      this.$confirm('确定要删除该人员吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePerson(id).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getPersonList()
          }
        })
      })
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          if (this.form.password != this.form.suffirmedPassword) {
            this.$message.error('两次密码不一致')
            return
          }

          this.form.roleIds = [this.form.roleId]

          addPerson(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success('添加成功')
              this.cancel()
              this.getPersonList()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    cancel() {
      this.drawer = false
    },
    changeStatus(row, type) {
      if (type == 1) {
        // 上架
      } else {
        // 下架
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    getRoleList() {
      roleList().then(res => {
        if (res.code == 200) {
          this.roleList = res.rows
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleCurrentChange(page) {
      this.params.pageNum = page
      this.getPersonList()
    },
    getPersonList() {
      // 获取人员列表
      personList(this.search).then(res => {
        if (res.code == 200) {
          this.personList = res.rows || []
          this.total = res.total || 0
        }
      })
    }
  },
  mounted() {
    this.getRoleList()
    this.getPersonList()
  }
}
</script>

<style lang="scss">
.upload-goods {
  .el-upload--picture-card {
    width: 80px;
    height: 80px;
    line-height: 78px;

    i {
      font-size: 20px;
    }
  }

  .el-upload-list__item {
    width: 80px;
    height: 80px;
  }
}
</style>
